<template>
  <div class="leftone">
    <div class="leftTop">
      <div><span>38</span><small>架</small></div>
      <div>
        <div id="container" style="height: 100%;width: 100%;margin-top: 1%;"></div>
      </div>
    </div>
    <p>
      <span>接入</span>
      <span>完好率</span>
    </p>
  </div>
</template>
<script>
  import echarts from "echarts";
  import reslist from "../json/position.js";
  import chartmixins from "../chartmixins.js";
  export default {
    components: {},
    mixins: [chartmixins],
    data() {
      return {
        total: 38,
        normal: 20,
        warn: 10,
        error: '08'
      };
    },
    computed: {},
    watch: {},
    mounted() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, "dark");
      var app = {};
      var rad = _.random(70,100)
      let option = null;
      option = {
        backgroundColor: "#0000",
        color: ["#349634", "#00082F"],
        title: {
          text:rad+'%',
          x: 'center',
          y: 'center',
          itemGap: 20,
          textStyle : {
            color : '#ffffff',
            fontFamily : '微软雅黑',
            fontSize : 18,
            // fontWeight : 'bolder'
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{d}%"
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: ["65%", "80%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle:{
              borderColor:'#053a76',
              borderWidth:1,
              normal: {
								label: { //饼图图形上的文本标签
									show: false,
									//									show: true,
									position: 'left'
								},

								labelLine: {
									show: false //隐藏标示线
								}
							}
            },
            data: [
              { value: rad, name: "" },
              { value: 100- rad, name: "" }
            ]
          }
        ]
      };

      myChart.setOption(option, true);

      this.myChart = myChart;

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    methods: {}
  };
</script>
<style lang='scss' scoped>
  .leftone {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    color:#ffffff;
    display:flex;
    flex-direction: column;
    .leftTop{
      flex:5;
      display:flex;
      flex-direction: row;
      div{
        flex:1;
        display:flex;
        flex-direction: row;
        justify-content:center;
        align-items:flex-end;
        span{
          font-size:44px;
        }
        small{
          font-size:15px;
          margin-left:15px;
          padding-bottom:10px;
        }
      }
    }
    p{
      flex:2;
      display:flex;
      flex-direction: row;
      span{
        flex:1;
        text-align:center;
        font-size:15px;
      }
    }
  }
</style>
